<header>
  <nav class="navbar navbar-expand-lg navbar-light bg-light fixed-top">
    <a class="navbar-brand" href="{{ 'app_repo_url' | translate }}" target="_blank" rel="noopener">
      <img src="/assets/icons/icon-192x192.png" width="30" height="30" class="d-inline-block align-top" alt="Logo" />
      {{ 'app_title' | translate }}
    </a>
    <button
      class="navbar-toggler"
      type="button"
      data-toggle="collapse"
      data-target="#navbarNavDropdown"
      aria-controls="navbarNavDropdown"
      aria-expanded="false"
      aria-label="Toggle navigation"
      (click)="toggleMenu()"
      [attr.aria-expanded]="!isCollapsed"
    >
      <span class="navbar-toggler-icon"></span>
    </button>
    <div class="collapse navbar-collapse" id="navbarNavDropdown" [ngbCollapse]="isCollapsed">
      <!-- left menu -->
      <ul class="navbar-nav">
        <li class="nav-item active">
          <a class="nav-link" routerLink="" routerLinkActive="active" [routerLinkActiveOptions]="{ exact: true }">
            {{ 'app_nav_home' | translate }}
          </a>
        </li>

        <li class="nav-item dropdown">
          <div ngbDropdown class="d-inline-block">
            <a href="javascript:void(0);" class="nav-link" id="dropdownBasic3" ngbDropdownToggle>{{ 'app_nav_examples' | translate }}</a>
            <div ngbDropdownMenu aria-labelledby="dropdownBasic3">
              <a *ngFor="let route of exampleRoutes" routerLink="examples/{{ route.path }}" class="dropdown-item">{{
                route.data.displayText
              }}</a>
            </div>
          </div>
        </li>
      </ul>

      <!-- right menu -->
      <ul class="navbar-nav ml-auto">
        <!-- language dropdwon -->
        <li class="nav-item dropdown">
          <div ngbDropdown class="d-inline-block">
            <a href="javascript:void(0);" class="nav-link" id="dropdownBasic2" ngbDropdownToggle>{{ currentCulture?.text }}</a>
            <div ngbDropdownMenu aria-labelledby="dropdownBasic2">
              <form
                *ngFor="let c of cultures"
                action="/api/app/setlanguage?culture={{c.value}}"
                method="post"
                class="culture-form"
                ngNoForm
                [class.active]="c.current"
              >
                <button id="{{ c.value }}" name="culture" value="{{ c.value }}" type="submit" class="dropdown-item">{{ c.text }}</button>
              </form>
            </div>
          </div>
        </li>

        <app-login-menu></app-login-menu>
      </ul>
    </div>
  </nav>
</header>
